<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$platform.name}</title>
    <link rel="stylesheet" href="/static/css/font-awesome.css">
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/js/yii.js"></script>
    <script src="/static/js/jquery.cookie.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: "Source Sans Pro", sans-serif;
        }

        .login_page {
            width: 100%;
            height: 100%;
            background-color:#44d1d1;
        }

        .login_container {
            position: fixed;
            top:35%;
            width:100%;
            height:100%;
            z-index: 2;
            opacity:0.9;
        }

        .login_inline_block {
            display: inline-block;
        }

        .login_content {
            width: 400px;
            height: 335px;
            border: 1px solid #ebeff0;
            background: #fff;
            border-radius:8px;
            position: absolute;
            right:25%;
        }

        .login_title {
            color: white;
            font-weight: bold;
            text-align: center;
            padding-bottom: 30px;
        }

        .login_title i {
            font-weight: bold;
            font-size: 30px;
            text-indent: -10px;
            padding-right: 30px;
        }

        .login_bubbles {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
        }

        .login_content p {
            width:60%;
            height: 40px;
            line-height: 40px;
            margin:auto;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            background: #fff;
            /*border-radius: 6px;*/
            color: #929191;
        }


        .login_content p i {
            float: right;
            line-height: 40px;
            width: 30px;
            height: 100%;
        }

        .login_content .newbutton {
            text-align: center;
        }

        .login_content .newbutton button {
            width:60%;
            height: 40px;
            background: #0b6fff;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            border: 0px;
            border-radius:6px;
            margin: auto;
        }

        .login_content input {
            float: left;
            height: 20px;
            padding: 10px;
            border: none;
            color: #929191;
        }

        .login_content p i.login_captcha {
            width: 123px;
            position: relative;
            top: 5px;
        }

        #login_tips {
            text-align: center;
            color: red;
        }

        @keyframes square {
            0% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(-700px) rotate(600deg);
            }
        }


        .login_content p:nth-child(3){margin-bottom:10px!important;}
        .mind{border:0px !important;height:20px!important;line-height:16px!important;font-size:12px;margin-bottom:10px!important;}
        .mind input{width:16px;height:16px;margin-right:5px}
        .login_img{width:100px;position: absolute;z-index:999;top:32%}

        .title{width:60%;margin: auto;margin-top:2%;border-bottom:2px #ccc solid;line-height:45px;}
        .login_content form {
            width: 100%;
            text-align: left;
            margin-top:20px;
        }
        .left{
            height:100%;width:100%;overflow: hidden;background-size:100% 100%;background-attachment:fixed;background-repeat:no-repeat ;
        }
        .right_content{position: absolute;left:15%;top:-9%}
        .right_content img{width:60%;}
        .login_log{position: fixed;top:5%;left:10%}
    </style>
</head>
<body>
<div class="login_page">


    <div id="d1" class="left" style="background-image: url('/static/images/1.jpg')"></div>

    <div class="login_container">



        <div class="login_content">
            <div class="title">账号登录</div>
            <form>
                <p>
                    <input type="text" name="account_name" id="username" placeholder="用户名">
                </p>
                <p>
                    <input type="password" name="account_password" id="password" placeholder="密码">
                </p>
                <p>
                    <input type="text" name="captcha_moude" placeholder="验证码" style="width:95px;"><i
                        class="login_captcha">
                    <img src="{:captcha_src()}" alt="验证码" id="login_captcha_again"/></i>
                </p>

                <p class="mind">
                    <input type="checkbox" id="remember" value="1" >记住用户名
                </p>

                <div class="newbutton">
                    <button type="button" id="login_submit">登&nbsp;&nbsp;录</button>
                </div>

                <div id="login_tips"></div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>





    //保存到cookie
    function save_cookies(){
        if($("#remember").prop("checked")){
            var username = $("#username").val();
            var password = $("#password").val();

            $.cookie("remember","true",{expires:7});
            $.cookie("username",username,{expires:7 });
            $.cookie("password",password,{expires:7 });
        }else{
            $.cookie("remember","false",{expires:-1});
            $.cookie("username","",{ expires:-1 });
            $.cookie("password","",{ expires:-1 });
        }
    };


    $(document).ready(function(){
        var rem = $.cookie('remember');
        if(rem){
            $("#remember").prop("checked",true);
            $("#username").val($.cookie("username"));
            $("#password").val($.cookie("password"));
        }
    });

    $(function () {
        var login_info = (function () {
            var catpcha_again = $("#login_captcha_again");
            var again_src = catpcha_again.attr("src");
            var login_submit = $("#login_submit");
            var login_tips = $("#login_tips");
            return {
                ele_again: catpcha_again,
                again_src: again_src,
                login_submit: login_submit,
                login_tips: login_tips
            };
        })();
        //验证码
        login_info.ele_again.click(function () {
            set_captcha(this);
        });
        //点击登陆
        login_info.login_submit.click(function () {
            save_cookies();
            yii.modal.ajax({
                url: "{:url('login/login_on')}",
                type: "post",
                data: $("form").serialize(),
                success: success
            });

        });

        //ajax 回调
        function success(data) {
            if (data.errno == "1") {
                login_info.login_tips.html($('<span class="fa fa-question-circle"> ' + data.msg + ' </span>')
                );
            } else {
                location.href = data.route;
            }
        }

        //点击验证码
        function set_captcha(that) {
            $(that).attr("src", login_info.again_src + "?random=" + Math.random());
        }
    });


</script>
